<template>
  <el-timeline-item ref="compRef" v-bind="{ ...$props }">
    <template #default>
      <slot></slot>
    </template>
    <template #dot>
      <div :class="cs.dot">
        <div :class="cs.inner"></div>
      </div>
    </template>
  </el-timeline-item>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { BaseTimelineExpose } from "./types";
import { TimelineItemProps } from "element-plus";
interface Props extends Partial<TimelineItemProps> {}

/** 需要按照官网文档设置默认值，否则表现效果和官网文档的不一致 */
withDefaults(defineProps<Props>(), {
  placement: "bottom",
  size: "normal",
});

const compRef = ref();

defineExpose<BaseTimelineExpose>({
  // @ts-ignore
  instance: compRef,
});
</script>
<style lang="scss" module="cs">
.dot {
  padding: 2px 2.5px;
  background-color: #ffffff;
  .inner {
    width: 5px;
    height: 5px;
    background-color: #e5e5e5;
    border-radius: 5px;
  }
}
</style>
